<template>
    <view class="container">
        <view class="shop-container u-text-center" v-if="user.have_shop">
            <!-- <view class="u-flex u-row-center">
                <image src="/static/images/my-shop.png" mode="widthFix"></image>
            </view> -->
            <view class="">
                请在PC端打开
            </view>
            <view class="u-p-30">
                PC端链接：{{sellerLink}}
            </view>
            <u-button size="mini" type="success" @click="handleCopy">点击复制PC端链接</u-button>
        </view>
        <view class="" v-else>
            <view class="entry-container">
                <view class="title">欢迎来到{{ site.site_name }}，商家中心</view>
                <!--店铺申请流程未完成-->
                <template v-if="shop_status === 'APPLY'">
                    <view class="tips">您的店铺申请流程尚未完成，无法对商家中心功能进行操作，您可以：</view>
                    <view class="apply-btn u-flex">
                        <navigator class="btn" open-type="switchTab" url="/pages/tabs/home/home">随便逛逛</navigator>
                        <view class="tip">店铺正在审核中，您可以去其它地方看看。</view>
                    </view>
                </template>
                <template v-else-if="shop_status === 'APPLYING'">
                    <view class="tips">您的店铺申请流程尚未完成，无法对商家中心功能进行操作，您可以：</view>
                    <view class="apply-btn u-flex">
                        <navigator class="btn" url="/pages/shop/apply/user-agreement">继续申请</navigator>
                        <view class="tip">申请流程未完成，您可以继续申请。</view>
                    </view>
                </template>
                <!--店铺申请被拒绝-->
                <template v-else-if="shop_status === 'REFUSED'">
                    <view class="tips">抱歉您的申请开店被拒绝，无法对商家中心功能进行操作，您可以：</view>
                    <view class="apply-btn u-flex">
                        <navigator class="btn" url="/pages/shop/apply/user-agreement">再次申请</navigator>
                        <view class="tip">再次申请开店并填写相关信息，即可开设您的店铺。</view>
                    </view>
                </template>
                <!--正常开店-->
                <template v-else>
                    <view class="tips">您现在还没有店铺，无法对商家中心功能进行操作，您可以：</view>
                    <view class="apply-btn u-flex">
                        <navigator class="btn" url="/pages/shop/apply/user-agreement">马上开店</navigator>
                        <view class="tip">进入马上开店并填写相关信息，即可开设您的店铺。</view>
                    </view>
                </template>
            </view>
        </view>
    </view>
</template>

<script>
    import Cache, {
        Keys
    } from '@/utils/cache.js';
    import {
        domain
    } from '@/config/config.js';
    import h5Copy from '@/common/junyi-h5-copy.js';
    import * as API_Shop from '@/api/shop';
    export default {
        data() {
            return {
                user: Cache.getItem(Keys.user),
                site: Cache.getItem(Keys.site),
                sellerLink: '',
                shop_status: '',
                step: 0
            };
        },
        onLoad() {
            uni.setNavigationBarTitle({
                title: this.user.have_shop ? '我的店铺' : '商家入驻'
            })
            this.sellerLink = domain.seller
            this.getApplyShopInfo()
        },
        methods: {
            handleCopy() {
                // #ifdef APP-PLUS || MP-WEIXIN
                uni.setClipboardData({
                    data: this.sellerLink,
                    complete() {
                        this.$u.toast('已复制到剪贴板')
                    }
                })
                // #endif
                // #ifdef H5
                const result = h5Copy(this.sellerLink)
                if (result) {
                    this.$u.toast('已复制到剪贴板')
                } else {
                    this.$u.toast('暂不支持复制')
                }
                // #endif
            },
            getApplyShopInfo() {
                API_Shop.getApplyShopInfo().then(response => {
                    if (response) {
                        this.shop_status = response.shop_disable
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .container {
        background-color: #FFFFFF;
        height: 100%;

        .entry-container {
            padding: 50% 20rpx 20rpx 20rpx;

            .title {
                color: #27a9e3;
                font-size: 32rpx;
                font-weight: 600;
            }

            .tips {
                color: #666;
                display: block;
                font-size: 28rpx;
                margin: 16rpx 0 2rpx 0;
                font-weight: bold;
                flex: 1;
            }

            .apply-btn {
                padding: 20rpx;
                margin-top: 40rpx;
                background-color: #fcf8e3;
                border: 2rpx solid #fbeed5;

                .btn {
                    font-size: 24rpx;
                    line-height: 70rpx;
                    background-color: red;
                    color: #fff;
                    padding: 0 20rpx;
                }

                .tip {
                    font-size: 22rpx;
                    color: #999;
                    margin-left: 20rpx;
                    flex: 1;
                }
            }
        }
    }
</style>
